<template>

  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="标题">
      <el-input v-model="form.title"></el-input>
    </el-form-item>
    <el-form-item label="确定按钮文字">
      <el-input v-model="form.okBtnText"></el-input>
    </el-form-item>
    <el-form-item label="取消按钮文字">
      <el-input v-model="form.cancelBtnText"></el-input>
    </el-form-item>
    <el-form-item label="重置按钮文字">
      <el-input v-model="form.restBtnText"></el-input>
    </el-form-item>
    <el-table :data="form.items" style="width: 100%">
      <el-table-column prop="label" label="名称" width="180" />
      <el-table-column prop="field" label="字段" width="180" />
      <el-table-column prop="showType" label="显示方式" />
      <el-table-column>
        <template #header>
          <el-button type="text" size="small" @click="showDialog(0)">添加</el-button
          >
        </template>
        <template #default>
          <el-button type="text" size="small"  @click="showDialog(0)">编辑</el-button
          >
          <el-button type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>    
  </el-form>
  <el-dialog
    v-model="dialogVisible"
    title="添加字段"
    width="50%"
    :before-close="handleClose"
  >
  <el-form v-model="tempItem">
    <el-form-item label="名称">
        <el-input v-model="tempItem.title"></el-input>
      </el-form-item>
      <el-form-item label="提交api字段名">
        <el-input v-model="tempItem.apiField"></el-input>
      </el-form-item>
      <el-form-item label="提交api字段类型">
        <el-select  v-model="tempItem.apiType" placeholder="Select">
          <el-option
            v-for="item in apiFieldTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 不同api数据类型对应显示额外的配置项 -->   
      <el-form-item label="日期格式" v-show="tempItem.apiType==='date'">
        <el-input v-model="tempItem.dateformat" ></el-input>
      </el-form-item>
      <el-form-item label="小数位数" v-show="tempItem.apiType==='decimal'">
        <el-input v-model="tempItem.decimalRound"></el-input>
      </el-form-item>
      
      <el-form-item label="显示宽度">
        <el-slider :step="1" show-stops :min="1" :max="24" v-model="tempItem.showWidth"> </el-slider>
      </el-form-item>
      <el-form-item label="显示类型">
        <el-select placeholder="Select" v-model="tempItem.showType">
          <el-option
            v-for="item in showTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

      </el-form-item>
      <!-- 不同显示类型，对应显示额外的配置项 -->
      <!-- <el-form-item label="允许输入长度" v-show="tempItem.showType==='text'">
        <el-input placeholder="允许输入长度，-1不限"  v-model="tempItem.allowLength"></el-input>
      </el-form-item>   -->
      <show-type-editor :ele="tempItem.showType"></show-type-editor>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 这里根据compo属性，显示对应的ElButton -->  
  <component :is="ele.compo" v-bind="ele.propsv"></component>
</template>

<script>
// import { ElButton, ElSwitch } from "element-plus"
import showTypeEditor from "../components/showTypeEditor.vue"
export default {  
  components:{
    showTypeEditor
  },
  data(){
    return {
      ele:{
        compo:'ElSwitch', //或ElSwith
        propsv:{
          disabled:true,
          loading:true,
          activeText:"aaa",
          inactiveText:"bbb"
        }
      },

      tempItem:{
        showWidth:12
      },
      dialogVisible:false,
      showTypes:[
        {label:"文本框",value:"ElInput"},
        {label:"下拉",value:"dropdown"},
        {label:"级联下拉",value:"cascader"},
        {label:"开关",value:"ElSwitch"},
        {label:"Radio",value:"radio"},        
        {label:"日期",value:"date"},
        {label:"图片上传",value:"imgUpload"},
        {label:"文件上传",value:"fileUpload"},
        {label:"编辑器",value:"fileUpload"}
      ],
      apiFieldTypes:[
        {label:"文字",value:"string"},
        {label:"整数",value:"int"},
        {label:"小数",value:"decimal"},
        {label:"日期",value:"date"},
        {label:"布尔",value:"bool"},
      ],
      form:{
        title:"xxx添加表单",
        okBtnText:"确定",
        cancelBtnText:"取消",
        restBtnText:"重置",
        items:[
          {
            label:"标题",
            field:"title",
            showType:"text"
          }
        ]
      }
    }
  },
  methods:{
    showDialog(id) {
      this.dialogVisible=true
    },
    handleClose(){}
  },
  created(){
    //模拟是从接口读回来的配置
    let jsonstr='{"compo":"ElSwitch","propsv":{"disabled":true}}'
    let obj=JSON.parse(jsonstr)
    this.ele=obj
  },
}
</script>

<style>

</style>